<template>
  <div>
    <div class="search-area">
      <el-input
        style="height: 20px;width: 20vw;margin-right: 15px;"
        placeholder="搜索标题"
        v-model="searchInput"
        clearable>
      </el-input>
      <el-button icon="el-icon-search" @click="searchArticles" circle></el-button>
    </div>
    


    <div class="article-list">
      <li v-for="article in articleArr" :key="article.Id" style="list-style: none;">
            <div class="article" @click="gotoArticle(article.id)">
              <div class="card">
            <div class="card-content">
              <h3 class="card-title" id="title">
                &nbsp;{{ article.title }}
              </h3>
              <div class="author">
              <div class="author-info">
                <small  id="date">&nbsp;{{ article.createDate }}</small>
              </div>
              </div>
            </div>
          </div>
            </div>
          </li>

  </div>      
    </div>
  </template>
  
  <script>
  import { getArticlesList,getArticleByTitle } from '../api/article';
  
  export default {
    name: 'ArticleList',
    data() {
      return {
        articleArr: [],
        article:{
                id:'',
                title:'',
                content:'',
                createDate:'',
                updateTime:'',
                userId:''
            },
        loading: false,
        searchInput:''
      };
    },
    created() {
      this.fetchArticleList();
    },
    methods: {
      //从后端获取数据（文章合集
      async fetchArticleList() {
        try {
          this.loading = true;
          const response = await getArticlesList();
          this.articleArr = response.data || [];
        } catch (error) {
          console.error('Error fetching articleList:', error);
        } finally {
          this.loading = false;
        }
      },
      //跳转文章
      gotoArticle(id) {
        this.$router.push({ path: '/article', query: { id: id } });
      },
      searchArticles(){
        getArticleByTitle({
          'title':this.searchInput
        }).then(res=>{
          if (res.code == 1){
            this.articleArr = res.data
          }else {
            this.$message.error("搜索失败")
          }
        })
      }
    },
  };
  </script>
  

<style>
.search-area{
  display: block;
  width: 100%;
  margin: 10px;
}
.article-list{
  float: left;
  display: flex;
}

.card {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  overflow: hidden;
  width: auto;
  margin: 10px;
  display: inline-block;
}

.card-content {
  background-color: #fff;
  padding: 30px;
}

.card-title {
  height: 20px;
  margin: 0;
}
.author {
  display: flex;
}

.author-info {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-left: 10px;
  width: 100px;
}

.author-info small {
  color: #aaa;
  margin-top: 5px;
}

</style>